import React, { useState } from 'react';
import { 
  Avatar, 
  Button, 
  Card, 
  Row, 
  Col, 
  Input, 
  Tag, 
  Upload,
  message
} from 'antd';
import { 
  UserOutlined, 
  SwapOutlined,
  PictureOutlined
} from '@ant-design/icons';

const Personal: React.FC = () => {
  const [loading, setLoading] = useState(false);

  // 处理实名认证
  const handleVerification = () => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      message.success('实名认证申请已提交！');
      setLoading(false);
    }, 1000);
  };

  // 处理营业执照上传
  const handleUpload = (info: any) => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }
  };

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
        <Card style={{ borderRadius: '8px', minHeight: '80vh' }}>
        {/* 头像和用户信息区域 */}
        <div style={{ textAlign: 'center', marginBottom: '40px' }}>
          <Avatar 
            size={80} 
            icon={<UserOutlined />}
            style={{ marginBottom: '16px' }}
          />
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '12px' }}>
            <span style={{ fontSize: '18px', fontWeight: 'bold', color: '#1890ff' }}>小DAO</span>
            <Tag color="#1890ff" style={{ borderRadius: '16px' }}>XX有限公司</Tag>
            <Button 
              type="text" 
              icon={<SwapOutlined />} 
              size="small"
              style={{ color: '#666' }}
            />
          </div>
        </div>

        {/* 账户信息表单 */}
        <div style={{ maxWidth: '800px', margin: '0 auto' }}>
          {/* 手机号和真实姓名 */}
          <Row gutter={24} style={{ marginBottom: '24px' }}>
            <Col span={12}>
              <div style={{ marginBottom: '8px', color: '#333', fontWeight: '500' }}>手机号</div>
              <Input 
                value="185****1136" 
                disabled 
                style={{ backgroundColor: '#f5f5f5' }}
              />
            </Col>
            <Col span={12}>
              <div style={{ marginBottom: '8px', color: '#333', fontWeight: '500' }}>真实姓名</div>
              <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
                <Input 
                  value="DAO (未实名)" 
                  disabled 
                  style={{ backgroundColor: '#f5f5f5', flex: 1 }}
                />
                <Button 
                  type="primary" 
                  onClick={handleVerification}
                  loading={loading}
                  style={{ borderRadius: '6px' }}
                >
                  实名认证
                </Button>
              </div>
            </Col>
          </Row>

          {/* 账户类型 */}
          <Row gutter={24} style={{ marginBottom: '24px' }}>
            <Col span={12}>
              <div style={{ marginBottom: '8px', color: '#333', fontWeight: '500' }}>账户类型</div>
              <Input 
                value="企业版" 
                disabled 
                style={{ backgroundColor: '#f5f5f5' }}
              />
            </Col>
            <Col span={12}>
              <div style={{ marginBottom: '8px', color: '#333', fontWeight: '500' }}>所属行业</div>
              <Input 
                value="健康" 
                disabled 
                style={{ backgroundColor: '#f5f5f5' }}
              />
            </Col>
          </Row>

          {/* 营业执照 */}
          <Row gutter={24}>
            <Col span={24}>
              <div style={{ marginBottom: '8px', color: '#333', fontWeight: '500' }}>营业执照</div>
                             <Upload
                 name="license"
                 listType="picture-card"
                 className="avatar-uploader"
                 showUploadList={false}
                 action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
                 onChange={handleUpload}
                 style={{ 
                   width: '100%', 
                   height: '120px',
                   border: '2px dashed #d9d9d9',
                   borderRadius: '8px',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
                   backgroundColor: '#fafafa'
                 }}
               >
                <div style={{ textAlign: 'center' }}>
                  <PictureOutlined style={{ fontSize: '32px', color: '#999', marginBottom: '8px' }} />
                  <div style={{ color: '#999', fontSize: '14px' }}>上传营业执照</div>
                </div>
              </Upload>
            </Col>
          </Row>
        </div>
      </Card>
    </div>
  );
};

export default Personal; 